import React, { useState, useEffect } from 'react';
import { Input, InfiniteScroll, List, Button, Ellipsis, Image } from 'antd-mobile';
import url from '../config/url';
import req from '../http/req'
import imgs from '../assets/images/c.jpg'

const Fails = () => {
    const [data, setData] = useState([]);
    const [page, setPage] = useState(1);
    const [keyword, setKeyword] = useState('');
    const [hasMore, setHasMore] = useState(true);
    async function loadMore() {
        const append = await req.get(url.GetCinemasList, {
            params: {
                page,
                keyword
            }
        });
        setData(val => [...val, ...append.data.paginate.data]);
        setHasMore(append.data.paginate.data.length > 0);
        var c = page + 1
        setPage(c)
    }
    function doSearch() {
        setData([])
        setKeyword(keyword)
    }
    useEffect(() => {
        doSearch()
    }, []) // eslint-disable-line react-hooks/exhaustive-deps
    return (<>

        <List header='影院列表'>
            <div style={{ display: 'flex', justifyContent: 'space-between',width:'90%',margin:'10px 20px' }}>
                {/* <SearchBar 
                placeholder='请输入内容'
                onChange={val=>{
                    setKeyword(val)
                }}
                onSearch={()=>doSearch()}
                onClear={()=>doSearch()}
            /> */}
                <Input
                    style={{ width: '70%' }}
                    placeholder='请输入内容'
                    clearable
                    onChange={val => {
                        setKeyword(val)
                    }}
                    onEnterPress={() => doSearch()}
                    onClear={() => setKeyword('')}
                />
                <Button size='small' color='primary' onClick={doSearch}>
                    搜索
                </Button>
            </div>
            {data.map((item) => (<List.Item
                key={item.id}
                prefix={
                    <Image
                        src={imgs}
                        style={{ borderRadius: 20 }}
                        fit='cover'
                        width={40}
                        height={40}
                    />}
                description={<Ellipsis
                    style={{ fontSize: '14px' }}
                    direction='end'
                    content={item.address}
                    expandText='展开'
                    collapseText='收起'
                />}
            >
                {item.name}
            </List.Item>))}
        </List>
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </>);
};
export default Fails